{extend name="public/common"}

{block name="style"}
<title>{$title}</title>
<link rel="stylesheet" href="/home/css/structure/list.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="list">
        <div class="structure">
            <div class="title" v-for="item in list.department" @click="toDetail(item.id,item.name)">
                <p>{{item.name}} ({{item.count}})</p><i class="fa fa-angle-right"></i>
            </div>
        </div>
        <ul>
            <li v-for="item in list.user">
                <div class="img-box">
                    <img :src="!item.header?item.avatar?item.avatar:'/home/images/common/default.png':item.header" class="avatar"/>
                    <img src="/home/images/common/man.png" class="icon" v-if="item.gender == 1"/>
                    <img src="/home/images/common/woman.png" class="icon" v-else-if="item.gender == 2"/>
                </div>
                <div class="content">
                    <p>{{item.nickname?item.nickname:item.name}}</p>
                    <p>{{item.position?item.position:'无'}}</p>
                </div>
                <a class="mobile" v-if="item.mobile" :href="'tel:'+item.mobile">
                    <img src="/home/images/common/tel.png" />{{item.mobile}}
                </a>
            </li>
        </ul>
    </div>
</div>
{/block}

{block name="script"}
<script>
    // document.title
    console.log({$list});
    var vw = new Vue({
        el: "#app",
        data: {
            list: {$list}
        },
        created() {
            document.title = window.sessionStorage.getItem('name');
        },
        methods: {
            toDetail(id,name) {
                window.location.href = '/home/structure/index3/id/'+id+'.html';
                window.sessionStorage.setItem('name',name);
            }
        }
    })
</script>
{/block}
